<template>
	<view class="content"   @touchstart="start()"  @touchend="end()">
		<view class="text-area">
			
			<image v-if="showTalking" src="../../static/talking.jpg"></image>
			
			
			<!-- <button @click="start()"  @touchstart="start()"  @touchend="end()">talk</button> -->
			<!-- <button @click="play()">播放</button> -->
			<!-- <button @click="parse()">解析</button> -->
			
		
			
		</view>
		
		 <audio style="display: none;" class="skPlayer-source" controls preload="auto"><source src="" type="audio/mpeg"></audio>
	</view>
</template>


<script>
import Recorder from 'js-audio-recorder';
	export default {
		data() {
			return {
				title: 'Hello',
				recorder:{},
				result:"",
				showTalking:true
			}
		},
		onLoad() {
			
			this.recorder = new Recorder({
			    sampleBits: 16,         // 采样位数，支持 8 或 16，默认是16
			    sampleRate: 16000,      // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
			    numChannels: 1,         // 声道，支持 1 或 2， 默认是1
			    compiling: false,       // 是否边录边转换，默认是false
			});

			

		},
		methods: {
			
	
			start(){
				console.log("开始录音")
				setInterval(this.watchMusicState(),1000)
				
				this.recorder.start().then(() => {
				    // 开始录音
					console.log("---")
				}, (error) => {
				    // 出错了
				    console.log(`${error.name} : ${error.message}`);
				});
			},
			end(){
				console.log("结束录音")
				this.recorder.stop();
				//停止完立刻解析
				this.parse();
				
			},
			play(){
				console.log("播放录音")
				this.recorder.play();
			},
			
			 watchMusicState(){
			        let _this = this;
			        let $audio = document.getElementsByTagName('audio')[0];//获取音乐DOM节点
			        let playOrPause = document.getElementsByClassName('playOrPause')[0];
			        // console.log($audio);
			        $audio.addEventListener("playing", function(){		//播放状态Doing
							console.warn("播放状态")
			        });$audio.addEventListener("pause", function(){ //暂停状态Doing
							console.warn("暂停状态")
			        });$audio.addEventListener("ended", function(){ //暂停状态Doing
							console.warn("结束状态")
			        });
			},
			
			parse(){
				let vm = this;
				var file = this.recorder.getPCMBlob();
				var blobUrl = URL.createObjectURL(file)
				
				const uploadTask = uni.uploadFile({
				    url: 'http://127.0.0.1:8980/v1/api/inter1', //仅为示例，非真实的接口地址
				    filePath: blobUrl,
				    name: 'file',
				    success: function (uploadFileRes) {
				        console.log(uploadFileRes.data);
						var res = uploadFileRes.data;
						var obj = JSON.parse(res);
						console.log(obj.result)
						
						// 请求搜索结果
						uni.request({
						    url: 'http://127.0.0.1:8980/v1/api/d2/'+obj.result[0], //仅为示例，并非真实接口地址。
							method:"GET",
						    success: (res2) => {
						        console.log("结果",res2.data);
								var audio = document.getElementsByTagName('audio')[0];
								           var button = document.getElementsByTagName('button')[0];
								           var source = document.getElementsByTagName('source')[0];
								               audio.src = res2.data;//可以播放
								               audio.paused && (audio.play())
											   
																		
						    },
						});
				    }
				});
			}
			
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-image: url('../../static/bg.jpg');
		height: -webkit-fill-available;
	}
	

</style>
